<template>
  <view class="price_box" :style="{ color: props.fontColor }">
    <view :style="{ fontSize: `${props.signSize}rpx` }">￥</view>
    <view :style="{ fontSize: `${props.fontSize}rpx` }">
      {{ props.data.split('.')[0] }}
    </view>
    <view :style="{ fontSize: `${props.signSize}rpx` }">
      {{ decimal(props.data) }}
    </view>
    <view
      class="price"
      v-if="props.otherData > 0 && props.data"
      :style="{ fontSize: `${props.signSize}rpx` }"
    >
      {{ '￥' + props.otherData }}
    </view>
    <view
      class="text"
      v-if="props.text"
      :style="{ fontSize: `${props.signSize}rpx` }"
    >
      {{ props.text }}
    </view>
  </view>
</template>

<!-- 价格组件 -->
<script lang="ts" setup>
import format from '@/util/format'
//接受父组件参数
const props = defineProps({
  /**
   * 字体颜色 默认 橙黄色
   */
  fontColor: {
    type: String,
    default: 'rgb(246, 144, 55)',
  },
  /**
   * 美元符号、小数位大小
   */
  signSize: {
    type: Number,
    default: 28,
  },
  /**
   * 整数位字体大小
   */
  fontSize: {
    type: Number,
    default: 40,
  },
  /**
   * 其他数值
   */
  otherData: {
    type: Number,
    default: 0,
  },
  /**
   * 展示的数值
   */
  data: {
    type: String,
    default: '',
  },
  /**
   * 后缀文本
   */
  text: {
    type: String,
    default: '',
  },
})

/**
 * 获取数值小数点后的小数
 * @param value: 数值
 */
const decimal = (value: string) => {
  let arr = (value + '').split('.')
  return '.' + (arr.length == 1 ? '00' : +arr[1])
}
</script>

<style scoped lang="scss">
.price_box {
  display: flex;
  align-items: baseline;
  letter-spacing: 2rpx;

  .price {
    margin-left: 10rpx;
    color: rgb(139, 135, 135);
    text-decoration: line-through;
  }

  .text {
    margin-left: 10rpx;
  }
}
</style>
